<template>
  <!-- 选择勘探设备 -->
  <el-dialog
    v-dialogDrag
    :title="title"
    :visible.sync="dialogVisible"
    class="dialogStyleMiddle"
    :before-close="handleClose"
    :close-on-click-modal="false"
    append-to-body
  >
    <el-col :span="24" :xs="24">
      <div>
        <el-form v-if="dialogVisible" ref="form" inline :model="filters" label-width="80px" class="dialog-form">
          <el-row>
            <el-form-item label="设备编号" prop="equipmentNum">
              <el-input v-model="filters.equipmentNum" size="small" clearable placeholder="请输入设备编号" />
            </el-form-item>
            <el-form-item v-show="typeOptions.length" label="设备类型" prop="equipmentType">
              <el-select v-model="filters.equipmentType" size="small" style="width: 199px" clearable placeholder="请选择设备类型" @change="handleChange">
                <el-option
                  v-for="item in typeOptions"
                  :key="item.typeNum"
                  :label="item.typeName"
                  :value="item.typeNum"
                />
              </el-select>
            </el-form-item>
          </el-row>
        </el-form>
        <el-row :gutter="10" class="button-wrap">
          <el-col :span="1.5">
            <el-button v-clickForbidden icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button v-clickForbidden icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-col>
        </el-row>
        <el-table
          ref="multipleTable"
          :data="tableData"
          class="table-list"
          stripe
          max-height="310"
          :row-key="getRowKeys"
          :row-style="rowClass"
          size="mini"
          @selection-change="handleSelectionChange"
          @row-click="rowChecked"
        >
          <el-table-column type="selection" width="38" align="center" />
          <el-table-column label="序号" type="index" width="51" align="center" />
          <el-table-column label="设备编号" prop="equipmentNum" min-width="200" align="center" show-overflow-tooltip />
          <el-table-column label="设备名称" prop="name" min-width="200" align="center" />
          <el-table-column
            prop="typeName"
            label="设备类型"
            min-width="120"
            align="center"
          />
          <el-table-column prop="status" label="设备状态" width="120" align="center">
            <template slot-scope="{row}">
              <span v-if="row.status === '0'">正常</span>
              <span v-if="row.status === '1'">报废</span>
            </template>
          </el-table-column>
          <!--<el-table-column label="信用代码" prop="orgCreditCode" min-width="200" align="center" />-->
        </el-table>
        <!-- 分页-->
        <pagination
          :total="total"
          :page.sync="filters.pageNum"
          :limit.sync="filters.pageSize"
          :page-sizes="[8,15,20,50,100]"
          @pagination="getList"
        />
      </div>
    </el-col>
    <span slot="footer" class="dialog-footer">
      <el-button size="medium" @click="handleClose">取 消</el-button>
      <el-button size="medium" type="primary" @click="submitForm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  components: {
  },
  props: {
    getEquipmentList: {
      type: Function,
      default: () => () => {}
    },
    typeOptions: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      title: '', // 弹框标题
      dialogVisible: false, // 弹框标识
      // 搜索框 start
      filters: { // form数据
        pageNum: 1,
        pageSize: 8,
        equipmentNum: '', // 设备编号
        equipmentType: '', // 设备的类型编号
        proId: '',
        equipmenType: '',
        equipmenTypeId: ''
      },
      // 表格数据 start
      total: 0, // 分页总页数
      tableData: [], // 表格数据
      multipleSelection: [], // 多选框选中数组
      selectRow: [], // 高亮数组
      getRowKeys(row) { // 分页记录功能
        return row.id
      },
      // 单位选中start
      equipmentIds: [], // 被选中单位id数组
      equipmentNames: [], // 被选中单位名字数组
      echoIds: [], // 用于存储分页回显的数据
      choice: '多选', // 单选,多选
      ids: [],
      echoList: [],
      equipmentType: '', // 设备类型编号
      EquipmentTypeId: '' // 设备类型id
    }
  },
  methods: {
    // 查询设备子类对应的id
    handleChange(value) {
      if (!value) {
        this.filters.equipmenTypeId = this.EquipmentTypeId
        this.filters.equipmenType = this.equipmentType
        return
      }
      const item = this.typeOptions.find(item => item.typeNum === value)
      this.filters.equipmenType = value
      this.filters.equipmenTypeId = item.id
    },
    // 从父组件获取参数的方法
    handleAdd(title, checkStatus, equipmentObj, EquipmentType, proId, echoIds, echoList) {
      const { equipmentType, EquipmentTypeId } = equipmentObj
      this.dialogVisible = true
      this.title = title
      this.selectRow = []
      this.handleChoice(checkStatus)
      if (echoIds instanceof Array) {
        this.echoIds = echoIds
      } else if (echoIds != null && echoIds !== '') {
        this.echoIds = echoIds.split(',')
      } else {
        this.echoIds = null
      }
      this.echoList = echoList
      // 用于存储被选中的设备id数组
      this.equipmentIds = []
      this.equipmentNames = []
      this.equipmentType = equipmentType // 重置使用
      this.EquipmentTypeId = EquipmentTypeId
      this.filters = { ...this.filters, equipmenTypeId: EquipmentTypeId, equipmenType: EquipmentType, proId }
      this.getList()
    },
    // 获取项目列表
    async getList() {
      if (this.multipleSelection.length) {
        this.echoIds = this.multipleSelection.map(item => { return item.id })
      }
      const { data: { rows, total }} = await this.getEquipmentList(this.filters)
      this.tableData = rows
      this.total = total
      this.$nextTick(() => {
        this.rowMultipleChecked()
      })
    },
    /**
     * 用于数据回显
     * echoIds 用于单个回显
     */
    rowMultipleChecked() {
      if (this.echoIds != null) {
        this.tableData.forEach((item, i) => {
          this.echoIds.forEach((multItem, j) => {
            if (this.tableData[i].orgCreditCode === this.echoIds[j]) {
              this.$refs.multipleTable.toggleRowSelection(this.tableData[i], true)// 这步操作是让  页面显示选中的数据
            }
          })
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    // 关闭弹框
    handleClose() {
      this.dialogVisible = false
      this.$refs.multipleTable.clearSelection()
      this.emptyForm()
    },
    // 搜索方法
    handleQuery() {
      this.filters.pageNum = 1
      this.getList()
    },
    emptyForm() {
      this.filters.equipmenTypeId = this.EquipmentTypeId
      this.filters.equipmenType = this.equipmentType
      this.resetForm('form')
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.emptyForm()
      this.handleQuery()
      this.echoIds = null
    },
    /** 清空按钮操作 */
    resetEmpty() {
      this.emptyForm()
      this.handleQuery()
    },
    // 控制表格选框多选单选
    handleChoice(checkStatus) {
      if (checkStatus === '0') {
        this.choice = '单选'
      } else {
        this.choice = '多选'
      }
    },
    // 多选框选中事件
    handleSelectionChange(val) {
      this.multipleSelection = val
      // 单选
      if (this.choice === '单选') {
        if (val.length > 1) {
          this.$refs.multipleTable.clearSelection()
          this.$refs.multipleTable.toggleRowSelection(val.pop())
        }
      }
      // 高亮
      this.selectRow = []
      if (this.multipleSelection.length > 0) {
        this.multipleSelection.forEach((item, index) => {
          this.selectRow.push(this.tableData.indexOf(item))
        })
      }
    },
    // 高亮样式
    rowClass({ row, rowIndex }) {
      if (this.selectRow.includes(rowIndex)) {
        return { 'background-color': 'rgba(185,221,249,.75)' }
      }
    },
    // 点击行时,选框选中
    rowChecked(row) {
      this.$refs.multipleTable.toggleRowSelection(row)
    },
    // 确定按钮
    submitForm() {
      this.filters.equipmenTypeId = ''
      this.dialogVisible = false
      this.$emit('equipmentList', this.multipleSelection)
      this.$refs.multipleTable.clearSelection()
    }
  }
}
</script>

<style scoped>
</style>
